<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    
     <script type="text/javascript">

         // 分页查询
         queryList = function(pageNum){
             // 读取rName
             let rName = $("input[name='rName']").val().trim();
             if(rName === undefined)
                 rName = "";
             layer.load(0)
             $.ajax({
                 type: "GET",
                 url: origin + "/role/list",
				 xhrFields: {
				    withCredentials: true
				 },
				 crossDomain: true,
                 data: {pageNum:pageNum,pageSize:globalPageSize,rName:rName,jwtToken:jwtToken},
                 success: function (data) {
                     layer.closeAll();
                     if(data.code === 200){
                         // 更新全局分页参数
                         globalPageSize = data.obj.pageSize;
                         globalPageNum = data.obj.pageNum;
                         // 填充分页
                         fillPageData(data.obj);
                         // 填充内容
                         fillContent(data.obj);
                         $("#checkall").removeAttr("checked");
                     }else{
                         layer.msg(data.msg,function(){})
                     }
                 },
                 complete : function(xhr, status) {
                     myComplete(xhr, status);
                 }
             });
         }
         // 填充内容
         function fillContent(obj){
             let list = obj.list;
             // 清空div
             $("#mycon").empty();
             $.each(list, function(){
                 let rState = this.rState==0 ? "启用" : "禁用";
                 let conbox =
                     " <tr>\n" +
                     "         \t<td style=\"vertical-align:middle;\"><input type=\"checkbox\" name=\"check\" value=\""+ this.rId +"\"></td>\n" +
                     "            <td>"+ this.rName +"</td>\n" +
                     "            <td><a id='rid_"+ this.rId +"' onclick='updateState("+ this.rId +", "+ this.rState +")' href='javascript:void(0);'>"+ rState +"</a></td>\n" +
                     "            <td><a href=\"editRole.html?pageSize="+obj.pageSize+"&pageNum="+obj.pageNum+"&rId="+this.rId+"\">编辑</a>&nbsp;&nbsp;&nbsp;<a href=\"javascript:deleteOne('"+ this.rId +"');\">删除</a> </td>\n" +
                     "        </tr>"
                 $("#mycon").append($(conbox));
             })
         }

         // 删除一个资源信息
         function deleteOne(rId){
             if(confirm("确认删除?")){
                 layer.load(0);
                 $.ajax({
                     type: "POST",
                     url: origin + "/role/"+ rId,
					 xhrFields: {
					    withCredentials: true
					 },
					 crossDomain: true,
                     data: {_method:"DELETE",jwtToken:jwtToken},
                     success: function (data) {
                         layer.closeAll();
                         if(data.code === 204){
                             layer.msg("删除成功");
                             queryList(globalPageNum)     // 刷新页面
                         }else{
                             layer.msg(data.msg,function(){})
                         }
                     }
                     ,complete : function(xhr, status) {
                         myComplete(xhr, status);
                     }
                 });
             }
         }

         // 修改角色state
         function updateState(rId, rState){
             if(rState == 0){
                 rState = 1;
             }else{
                 rState = 0;
             }
             layer.load(0)
             $.ajax({
                 type: "POST",
                 url: origin + "/role/" + rId,
				 xhrFields: {
				    withCredentials: true
				 },
				 crossDomain: true,
                 data: {rState:rState,_method:"PUT",jwtToken:jwtToken},
                 dataType: "json",
                 success: function (data) {
                     layer.closeAll()
                     if (data.code == 200){
                         if(rState == 0){
                             layer.msg("启用成功")
                             $("#rid_"+ rId).text("启用")
                         }else{
                             layer.msg("已禁用")
                             $("#rid_"+ rId).text("禁用")
                         }
                         $("#rid_"+ rId).attr("onclick","")
                         $("#rid_"+ rId).attr("onclick","updateState("+ rId +","+ rState +")")
                     }else{
                         layer.msg(data.msg,function(){})
                     }
                 },
                 complete : function(xhr, status) {
                     myComplete(xhr, status);
                 }
             })
         }

        function checkall(){
            var alls=document.getElementsByName("check");
            var ch=document.getElementById("checkall");
            if(ch.checked){
                for(var i=0;i<alls.length;i++){
                    alls[i].checked=true;
                }
            }else{
                for(var i=0;i<alls.length;i++){
                    alls[i].checked=false;
                }
            }
        }
        function delAll(){
            var alls=document.getElementsByName("check");
            var ids=new Array();
            for(var i=0;i<alls.length;i++){
                if(alls[i].checked){
                    ids.push(alls[i].value);
                }
            }
            if(ids.length>0){
                if(confirm("确认删除?")){
                    layer.load(0);
                    $.each(ids, function(index,id){
                        $.ajax({
                            type: "POST",
                            url: origin + "/role/"+ id,
							xhrFields: {
							   withCredentials: true
							},
							crossDomain: true,
                            data: {_method:"DELETE",jwtToken:jwtToken},
                            success: function (data) {
                                layer.closeAll();
                                if(data.code === 204){
                                    if(index === ids.length-1){
                                        layer.msg("删除成功");
                                        queryList(globalPageNum)     // 刷新页面
                                    }
                                }else{
                                    layer.msg(data.msg,function(){})
                                }
                            }
                            ,complete : function(xhr, status) {
                                myComplete(xhr, status);
                            }
                        });
                    })
                    return false;
                }
            }else{
                alert("请选中要删除的项");
            }
        }

         $(function () {
             // 分页查询
             queryList(globalPageNum);
             // 添加资源
             $('#newNav').click(function(){
                 window.location.href="addRole.html?pageNum=" + globalPageNum + "&pageSize=" + globalPageSize;
             });
             // 监听查询按钮
             $("#queryByRName").on("click", function(){
                 queryList(1);
             })
         });
    </script>   
    
</head>
<body>
<form class="form-inline definewidth m20">
    角色名称：
    <input type="text" name="rName" class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
    <button type="button" id="queryByRName" class="btn btn-primary">查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>角色名称</th>
        <th>状态</th>
        <th width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="mycon"></tbody>
</table>
        
        
   <table class="table table-bordered table-hover definewidth m10" >
       <tr>
           <th colspan="5">
               <div id="pageInfo-box" class="inline pull-right page"></div>
               <div><button type="button" class="btn btn-success" id="newNav">添加角色</button>&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button></div>
           </th>
       </tr>
  </table>     
 </body>
</html>